<template>
  <el-form ref="formRef" :model="dynamicValidateForm" label-width="120px" class="demo-dynamic">
    <el-form-item prop="gitUrl" label="git地址">
      <el-input v-model="dynamicValidateForm.gitUrl" />
    </el-form-item>
    <el-form-item prop="language" label="language">
      <el-input v-model="searchFieldOptions.language" />
    </el-form-item>
    <el-form-item v-for="(field, index) in dynamicValidateForm.softName" :key="field.key" :label="'软件名称'"
      :prop="'query.' + index + '.value'">
      <el-input v-model="field.value" />
    </el-form-item>
    <el-form-item prop="email" label="Email" :rules="[
      {
        required: true,
        message: 'Please input email address',
        trigger: 'blur',
      },
      {
        type: 'email',
        message: 'Please input correct email address',
        trigger: ['blur', 'change'],
      },
    ]">
      <el-input v-model="dynamicValidateForm.email" />
    </el-form-item>
    <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.key" :label="'Domain' + index"
      :prop="'domains.' + index + '.value'" :rules="{
        required: true,
        message: 'domain can not be null',
        trigger: 'blur',
      }">
      <el-input v-model="domain.value" />
      <el-button class="mt-2" @click.prevent="removeDomain(domain)">Delete</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
      <el-button @click="addDomain">New domain</el-button>
      <el-button @click="resetForm(formRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'

const formRef = ref<FormInstance>()
const dynamicValidateForm = reactive<{
  domains: DomainItem[]
  email: string
  gitUrl: string
  softName: SoftName[] // 也不行！！！
}>({
  domains: [
    {
      key: 1,
      value: '',
      // language: '', // 不行！
    },
  ],
  email: '',
  gitUrl: '',
  softName: [
    {
      key: 2,
      value: '',
    }
  ],
  // queryItem: [
  //   {
  //     key: 1,
  //     softName: '',
  //     softVersion: '',
  //     gitUrl: '',
  //     language: '',
  //     status: '',
  //     timeRange: '',
  //   }
  // ],
})

interface DomainItem {
  key: number
  value: string
  // language: string // 不行！！
}

interface SoftName {
  key: number
  value: string
}

// 查询字段
// const searchField = reactive<{
//   label: string,
//   enLabel: string,
//   value: string,
//   type: string,
//   options: {
//     label: string, 
//     value: string
//   }[]
// }[]>(
//   [
//     { label: '软件名称', enLabel: 'softName', value: '', type: 'input', options: [{label: '', value: ''}] },
//     { label: '软件版本', enLabel: 'softVersion', value: '', type: 'input', options: [{label: '', value: ''}] },
//     { label: 'git地址', enLabel: 'gitUrl', value: '', type: 'input', options: [{label: '', value: ''}] },
//     { label: '编程语言', enLabel: 'language',  value: '', type: 'input', options: [{label: '', value: ''}] },
//     {
//       label: '状态', enLabel: 'status', value: '', type: 'select',
//       options: [{
//         label: '进行中',
//         value: '0',
//       }, {
//         label: '成功',
//         value: '1',
//       }, {
//         label: '失败',
//         value: '2',
//       }]
//     },
//     { label: '时间范围', enLabel: 'timeRange', value: '', type: 'time', options: [{label: '', value: ''}] },
//   ]
// );

const searchFieldOptions = reactive<{
  key: number,
  softName: string
  softVersion: string
  gitUrl: string
  language: string
  status: string
  timeRange: string
}>({
  key: 1,
  softName: '',
  softVersion: '',
  gitUrl: '',
  language: '',
  status: '',
  timeRange: '',
});

interface QeuryItem {
  key: number,
  softName: string
  softVersion: string
  gitUrl: string
  language: string
  status: string
  timeRange: string
}

const removeDomain = (item: DomainItem) => {
  const index = dynamicValidateForm.domains.indexOf(item)
  if (index !== -1) {
    dynamicValidateForm.domains.splice(index, 1)
  }
}

const addDomain = () => {
  dynamicValidateForm.domains.push({
    key: Date.now(),
    value: '',
  })
}

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  // 重置后
  console.log('重置后 formEl: ', formEl);
  console.log('重置后 formRef: ', formRef);
}
</script>